<template>
  <q-modal v-model="opened" :content-css="{minWidth: '35vw', minHeight: '20vh'}" @hide="closeVerify">
    <q-modal-layout>
      <q-toolbar slot="header" color="negative">
        <q-btn flat round dense @click="opened = false" icon="reply"/>
        <q-toolbar-title>{{verifyTitle}}</q-toolbar-title>
      </q-toolbar>
      <q-toolbar color="negative" slot="footer">
        <q-btn flat color="warning" @click.native="confirmVerify">确认</q-btn>
        <q-btn flat  @click.native="closeVerify">关闭</q-btn>
      </q-toolbar>
      <div class="q-ma-lg">
        <div class="code flex flex-center" @click="refreshCode" >
          <SIdentify :identifyCode="identifyCode"></SIdentify>
        </div>
        <q-input type="text" v-model="verifyCode" float-label="验证码"/>
      </div>
    </q-modal-layout>
  </q-modal>
</template>

<script>
import SIdentify from 'components/verify/identify'

export default {
  name: 'verify',
  resultData: false,
  data () {
    return {
      identifyCode: '',
      identifyCodes: '1234567890',
      verifyCode: '',
      opened: false
    }
  },
  props: {
    vcodeDialog: {
      type: Boolean,
      default: null
    },
    verifyTitle: {
      type: String,
      default: ''
    }

  },
  methods: {
    closeVerify () {
      this.$emit('clsVerify')
    },
    confirmVerify () {
      if (this.identifyCode === this.verifyCode) {
        this.$emit('upVerify')
      } else {
        alert('验证码错误！')
      }
    },
    randomNum (min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    refreshCode () {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 6)
    },
    makeCode (o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
      }
    }
  },
  watch: {
    vcodeDialog () {
      this.opened = this.vcodeDialog
      this.verifyCode = ''
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 6)
    }
  },
  components: {
    SIdentify
  }
}
</script>
